<!--  -->

<template>
  <div class="f_page">
    <div class="f_yemian">
      <div class="title">供应商列表</div>
      <div class="top">
        <div class="shuru">
          <!--  <div>供应商简称</div> -->
          <el-input class="neirong"
                    v-model="input"
                    placeholder="供应商名称或地区"></el-input>
          <el-button class="anniu"
                     type="primary">搜索</el-button>
        </div>
        <el-cascader v-model="value"
                     :options="options"
                     @change="handleChange"></el-cascader>
        <el-button class="anniu"
                   type="primary">搜索</el-button>

        <el-button class="anniu"
                   type="primary">新增供应商</el-button>
      </div>
      <div class="zhongbu">

        <div class="biao">
          <template>
            <el-table :data="tableData"
                      height="500"
                      border
                      style="width: 100%">
              <el-table-column prop="date"
                               label="序号"
                               width="200">
              </el-table-column>
              <el-table-column prop="name"
                               label="供应商ID"
                               width="200">
              </el-table-column>
              <el-table-column prop="province"
                               label="供应商简称"
                               width="200">
              </el-table-column>
              <el-table-column prop="city"
                               label="供应商类别"
                               width="200">
              </el-table-column>
              <el-table-column prop="address"
                               label="供应商级别"
                               width="200">
              </el-table-column>
              <el-table-column prop="zip"
                               label="供应区域"
                               width="200">
              </el-table-column>
              <el-table-column prop="zip"
                               label="审核状态"
                               width="200">
              </el-table-column>
              <el-table-column fixed="right"
                               label="操作"
                               width="200">
                <template slot-scope="scope">
                  <el-button size="mini"
                             @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                  <el-button size="mini"
                             type="danger"
                             @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>

        </div>
      </div>

    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      input: "",
      options: [
        {
          value: "选项1",
          label: "供应商级别",
          children: [
            {
              value: "1",
              label: "1"
            }
          ]
        },
        {
          value: "选项2",
          label: "供应商类别",
          children: [
            {
              value: "2",
              label: "2"
            }
          ]
        },
        {
          value: "选项3",
          label: "审核状态",
          children: [
            {
              value: "3",
              label: "3"
            }
          ]
        }
      ],
      tableData: [
        {
          date: "1",
          name: "123",
          province: "虾",
          city: "水果",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      value: ""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(value) {
      /*    console.log(value);
      console.log(f1); */
    },
    handleClick() {
      console.log("123456");
      /* console.log(row); */
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/*   //@import url(); 引入公共css类 */
.f_page {
  display: flex;
  justify-content: center;
  .f_yemian {
    display: flex;
    width: 95%;
    flex-direction: column;
    .title {
      font-size: 20px;
      margin: 20px 0px 20px 20px;
    }
    .top {
      display: flex;
      width: 100%;
      height: auto;
      /*  justify-content: space-around; */
      .shuru {
        display: inline-flex;
        width: auto;
        align-items: center;
        .neirong {
          width: 200px;
          margin-left: 20px;
        }
      }
      .anniu {
        margin-left: 20px;
        margin-right: 50px;
      }
    }
    .zhongbu {
      /*       display: flex;
      width: 100%;
      flex-direction: column; */
      /*  align-items: center; */
      .biao {
        width: 100%;
        margin-top: 50px;
      }
    }
  }
}
</style>
